<template>
  <div id="tree" ref="tree"></div>
</template>
<script setup>
import {onMounted, reactive, ref} from 'vue'
import FamilyTree from '@balkangraph/familytree.js'
import http from "../../utils/request";
defineProps({
  msg: String
})
const tree = ref(null)
const nodes = reactive([{}])


const mytree = (domEl, x) =>{
  console.log("X",x)
  let family = new FamilyTree (domEl, {
    nodes: x,
    nodeBinding: {
      field_0: "name",
      img_0: "img"
    }
  });
}

const getDataList = ()=>{
  http.get("/people/tree").then((data)=>{
    mytree(tree.value,data.data)
  })
}


onMounted(()=>{
  getDataList()
})
</script>

<style scoped>
a {
  color: #42b983;
}
</style>
